<template>
    <div id="promotionEdit" class="wrap_common">
        <div class="list_wrap_body">
            <div class="list_inp_wrap">
                <appInputAll v-model="form.typeText" arrowsRight disabled @click.native="$refs.selectType.show()" title="活动类型" placeholder="请选择活动类型"/>
                <appInputAll v-model="form.title" title="活动标题" placeholder="请输入活动标题"/>
                <appInputAll type="textarea" v-model="form.summary" title="副标题" placeholder="请输入副标题"/>
                <appInputAll v-model="form.start_date" arrowsRight disabled @click.native="$refs.startTime.show()" title="活动开始时间" placeholder="请选择开始时间"/>
                <appInputAll v-model="form.end_date" arrowsRight disabled @click.native="$refs.endTime.show()" title="活动结束时间" placeholder="请选择结束时间"/>
                <appInputAll type="textarea" v-model="form.content" title="活动详情" placeholder="请输入活动详情"/>
            </div>
        </div>
        <!-- 弹窗 -->
        <wPicker
            v-if="!$util.isEmpty(typeAllArr)"
			@noconfirm="typeConfirm"
			:selectList="typeAllArr"
			mode="selector"
			ref="selectType" />
        <wPicker
            current
			@confirm="startTimeConfirm"
			mode="date"
			ref="startTime" />
            <wPicker
            current
			@confirm="endTimeConfirm"
			mode="date"
			ref="endTime" />
        <footer>
            <div class="save_btn" @click="saveBtn">保存</div>
        </footer>
    </div>
</template>
<script>
import wPicker from '@/components/w-picker/components/w-picker'
import appInputAll from '@/components/app_input_all'
import { getClasslist, add, edit, getDetail } from '@/api/promotion'
export default {
	name: 'promotionEdit',
	components: {
		wPicker,
		appInputAll
	},
	data() {
		return {
			typeAllArr: [],
			form: {
				title: '',
				summary: '',
				typeText: '',
				promotion_cat_id: '',
				start_date: '',
				end_date: '',
				content: ''
			},
			promotion_id: null,
			query: {}
		}
	},
	onLoad(val) {
		this.query = val
	},
	mounted() {
		this.init()
	},
	methods: {
		init() {
			this.promotion_id = this.query.promotion_id || null
			this._getClasslist()
		},
		// 获取类型
		_getClasslist() {
			getClasslist().then(res => {
				if (res.status === 'success') {
					this.typeAllArr = res.data.map(i => ({
						...i,
						label: i.promotion_cat_name
					}))
					if (this.promotion_id) {
						this._getDetail()
					}
				} else {
					uni.showToast({
						title: res.errors.message,
						icon: 'none'
					})
				}
			})
		},
		// 获取服务详情
		_getDetail() {
			let params = {
				promotion_id: this.promotion_id
			}
			getDetail(params).then(res => {
				if (res.status === 'success') {
					let data = res.data.promotion_info
					data.start_date = data.start_date.replace(/\./g, '-')
					data.end_date = data.end_date.replace(/\./g, '-')
					this.form = {
						title: data.title,
						summary: data.summary,
						typeText: '',
						promotion_cat_id: data.promotion_id,
						start_date: data.start_date,
						end_date: data.end_date,
						content: data.content
					}
					for (let i in this.typeAllArr) {
						if (this.typeAllArr[i].promotion_cat_id == data.promotion_cat_id) {
							this.form.typeText = this.typeAllArr[i].promotion_cat_name
						}
					}
				} else {
					uni.showToast({
						title: res.errors.message,
						icon: 'none'
					})
				}
			})
		},
		// 保存
		saveBtn() {
			let hostFn = this.promotion_id ? edit : add
			let form = this.form
			let params = {
				title: form.title,
				summary: form.summary,
				promotion_cat_id: form.promotion_cat_id,
				start_date: form.start_date,
				end_date: form.end_date,
				content: form.content
			}
			if (this.promotion_id) {
				params.promotion_id = this.promotion_id
				params.owner_user_id = this.query.owner_user_id
			}
			hostFn(params).then(res => {
				if (res.status === 'success') {
					uni.showToast({
						title: '保存成功！',
						icon: 'none'
					})
					uni.navigateTo({
						url: `/pages/marketing/deactive?owner_user_id=${this.query.owner_user_id}`
					})
				} else {
					uni.showToast({
						title: res.errors.message,
						icon: 'none'
					})
				}
			})
		},
		// 类型选择
		typeConfirm(val) {
			this.form.typeText = val.checkArr.label
			this.form.promotion_cat_id = val.checkArr.promotion_cat_id
		},
		// 开始时间选择
		startTimeConfirm(val) {
			if (!this.$util.isEmpty(this.form.end_date)) {
				this.timeContrast(val.result, this.form.end_date)
			}
			this.form.start_date = val.result
		},
		// 结束时间选择
		endTimeConfirm(val) {
			if (!this.$util.isEmpty(this.form.start_date)) {
				this.timeContrast(this.form.start_date, val.result)
			}
			this.form.end_date = val.result
		},
		timeContrast(start, end) {
			if (Date.parse(start) > Date.parse(end)) {
				uni.showToast({
					title: '开始时间不能大于结束时间',
					icon: 'none'
				})
				return
			}
		}
	}
}
</script>

<style lang="scss" scoped>
#promotionEdit {
    .list_wrap_body {
        .list_inp_wrap {
            margin-bottom: 20px;
            padding-left: 20px;
        }
        .van-cell {
            padding: 30px;
            .van-field__label {
                color: #666;
            }
        }
    }
    .save_btn {
        height: 100%;
        color: #3a1b04;
        font-size: 24px;
        background-color: #ffd11a;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>
